<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1. 表格的使用 -->
    <!-- 
        table: 表格整体，可用于包裹多个tr
        tr: 表格每行，可用于包裹td
        td: 表格单元格，可用于包裹内容
        注意：
            标签的嵌套关系: table > tr > td
     -->
    <!-- 
        相关属性：
        border: 边框宽度
        width: 表格宽度
        height: 表格高度
        注意：
            实际开发时对于样式效果推荐使用CSS设置
     -->
    <table border="1" width="400" heigth="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>100</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>100</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>90</td>
            <td>B</td>
        </tr>
    </table>

    <!-- 2. 表格标题和表头单元格标签 -->
    <!-- 
        场景：在表格中表示整体大标题和一系列小标题
        caption: 表格大标题
        th: 表头单元格
        注意：
            caption标签书写在table标签内部
            th标签书写在tr标签内部(用于替换td标签)
     -->
    <table border="1" width="400" heigth="400">
        <caption><b>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </table>

    <!-- 3. 表格的结构标签 -->
    <!-- 
        场景：让表格的内容结构分组，突出表格的不同部分，使语义更加清晰
        thread: 表格头部
        tbody: 表格主体
        tfoot: 表格底部
     -->
    <table border="1" width="400" heigth="400">
        <caption><b>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>100</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>100</td>
                <td>A</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>牛</td>
                <td>牛</td>
            </tr>
        </tfoot>
    </table>

    <!-- 4. 合并单元格 -->
    <!-- 
        rowspan: 跨行合并，将多行的单元格垂直合并
        colspan：跨列合并，将多列单元格水平合并
        注意：
            只有同一个结构标签中单元格才能合并，不能跨结构标签合并
     -->
    <table border="1" width="400" heigth="400">
        <caption><b>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td rowspan="2">100</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>A</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">牛</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>